<template>
   <div class="box">
        <div class="box1">
            <div class="box2"></div>
            <p class="p1">汇方圆</p>
            <p class="p2">申请</p>
            <p class="p3">获取你的昵称、头像、地区及性别</p>
            <img class="img1" src="/static/imgs_s01/s01_touxiang.png" alt="">
            <p class="p4">久颜</p>
            <p class="p5">微信个人信息</p>
            <img class="img2" src="/static/imgs_s01/s01_duihao.png" alt="">
            <p class="p6">使用其他头像和昵称</p>
            <div class="box3">取消</div>
            <div class="box4">允许</div>
        </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
        .box {
            width: 100%;
            height: 675px;
            background-color: #7A7A7A;
        }

        .box1 {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 317px;
            background: rgba(255, 255, 255, 1);
            border-radius: 9px 9px 0px 0px;
        }

        .box2 {
            position: absolute;
            top: 16px;
            left: 18px;
            width: 22px;
            height: 22px;
            background: rgba(212, 212, 212, 1);
            border-radius: 50%;
        }

        .p1 {
            position: absolute;
            top: 21px;
            left: 45px;
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: bold;
            color: rgba(53, 53, 53, 1);
        }

        .p2 {
            position: absolute;
            top: 21px;
            left: 94px;
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: bold;
            color: rgba(23, 23, 23, 1);
        }

        .p3 {
            position: absolute;
            top: 62px;
            left: 18px;
            font-size: 15px;
            font-family: PingFang SC;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
        }

        .img1 {
            position: absolute;
            top: 107px;
            left: 18px;
            width: 36px;
            height: 36px;
            border-radius: 6px;
        }

        .p4 {
            position: absolute;
            top: 108px;
            left: 66px;
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: bold;
            color: rgba(26, 26, 26, 1);
        }

        .p5 {
            position: absolute;
            top: 129px;
            left: 66px;
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(178, 178, 178, 1);
        }

        .img2 {
            position: absolute;
            top: 118px;
            left: 341px;
            height: 14px;
            height: 14px;
        }

        .p6 {
            position: absolute;
            top: 170px;
            left: 18px;
            font-size: 13px;
            letter-spacing: 2px;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(87, 107, 149, 1);
        }

        .box3 {
            position: absolute;
            top: 221px;
            left: 72px;
            width: 109px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            background: rgba(237, 237, 237, 1);
            border-radius: 3px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: bold;
            color: rgba(6, 174, 86, 1);
        }

        .box4 {
            position: absolute;
            top: 221px;
            left: 195px;
            width: 109px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            background: rgba(4, 193, 96, 1);
            border-radius: 3px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: bold;
            color: rgba(255, 255, 255, 1);
        }
</style>
